<!doctype html>
<html lang="en">

	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" charset="UTF-8">
		<title>我的订单</title>
		<link rel="stylesheet" href="css/main.css">
		<link rel="stylesheet" href="css/dropload.css">
		<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
		<script src="js/lib/mobiscroll.core-2.5.2.js"></script>
		<script src="js/lib/mobiscroll.core-2.5.2-zh.js"></script>

		<link rel="stylesheet" href="css/mobiscroll.core-2.5.2.css">
		<link rel="stylesheet" href="css/mobiscroll.animation-2.5.2.css">
		<script src="js/lib/mobiscroll.datetime-2.5.1.js"></script>
		<script src="js/lib/mobiscroll.datetime-2.5.1-zh.js"></script>

		<!-- S 可根据自己喜好引入样式风格文件 -->
		<script src="js/lib/mobiscroll.android-ics-2.5.2.js"></script>
		<link rel="stylesheet" href="css/mobiscroll.android-ics-2.5.2.css">
		<!-- E 可根据自己喜好引入样式风格文件 -->

	</head>
	<script type="text/javascript">
		$(function() {
			var currYear = (new Date()).getFullYear();
			var opt = {};
			opt.date = { preset: 'date' };
			//opt.datetime = { preset : 'datetime', minDate: new Date(2012,3,10,9,22), maxDate: new Date(2014,7,30,15,44), stepMinute: 5  };
			opt.datetime = { preset: 'datetime' };
			opt.time = { preset: 'time' };
			opt.default = {
				theme: 'android-ics light', //皮肤样式
				display: 'modal', //显示方式 
				mode: 'scroller', //日期选择模式
				lang: 'zh',
				startYear: currYear - 10, //开始年份
				endYear: currYear + 10 //结束年份
			};

			$("#begin_time").scroller('destroy').scroller($.extend(opt['date'], opt['default']));
			//设置初始化时间（当天） 
			var firstDate = $("#begin_time").val();
			if(firstDate != "") {
				firstDate = new Date(firstDate);
				$("#begin_time").mobiscroll('setDate', firstDate, true);
			}

			$("#end_time").scroller('destroy').scroller($.extend(opt['date'], opt['default']));
			var secondDate = $("#end_time").val();
			if(secondDate != "") {
				secondDate = new Date(secondDate);
				$("#end_time").mobiscroll('setDate', secondDate, true);
			}
		});
	</script>
	<script>
		//获取像素比
		var pixelRatio = 1 / window.devicePixelRatio;
		//通过js动态设置视口(viewport)
		//document.write('<meta name="viewport" content="width=device-width,initial-scale='+pixelRatio+',minimum-scale='+pixelRatio+',maximum-scale='+pixelRatio+'" />');
		// 获取html节点
		var html = document.getElementsByTagName('html')[0];
		// 获取屏幕宽度
		var pageWidth = html.getBoundingClientRect().width;
		// 屏幕宽度 / 固定数值 = 基准值
		html.style.fontSize = pageWidth / 16 + "px";
	</script>

	<body data-type = 'orderAfter'>

		<form id="ajaxForm" action="" method="post">
			<div id="header_order">
				<!-- 顶部导航 -->
				<header class="order_head clearfix">
					<div class="order_head_top">
						<a href="order.html">话费支付记录</a>
					</div>
					<div class="order_head_top active">
						<a href="orderAfter.html">微信支付记录</a>
					</div>
				</header>
				<!-- 查询 -->
				<div class="inquiry">
					<div class="inquiry_cell"><input type="text" id="query" name="_query.mobile" value='' placeholder="手机号码/产品名称"><i id="block"></i></div>
					<span id="search">查询</span>
					<div class="time">
						<div class="time_num"><label>起始时间：</label><input type="text" name="_query.startTime" value='' id="begin_time"></div>
						<div class="time_num"><label>结束时间：</label><input type="text" name="_query.endTime" value='' id="end_time"></div>
						<em id="display">隐藏</em>
					</div>
				</div>
				<!-- 导航栏 -->
				<nav class="order_nav">
					<a class="all active" status=''>全部</a>
					<a class="state_suc" status='7'>开通成功</a>
					<a class="state_err" status='8'>开通失败</a>
					<!--<a class="state_ord" status='1'>订购中</a>-->
					<a class="state_dea" status='0'>受理中</a>
				</nav>
			</div>

			<div class="container" id="order_container">
				<!-- 列表 -->

				<ul class="order_list clearfix" style="display: block; overflow: hidden">
				</ul>

				<!-- load 加载更多..-->
				<div class="load"></div>
			</div>
			<input type="hidden" name="pageUp" value="1">
			<input type="hidden" name="pageDown" value="1">
		</form>

		<div id="Popup">
			<div class="apply_out">
				<div class="apply_popup dinggou">
					<section id="orderDetail">
						<p>客户手机号码：<em>186****7737</em></p>
						<p>产品名称：<em>10元100M-国内</em></p>
						<p>产品价格：<em>10元/次</em></p>
						<p>订购时间：<em>2016-07-01 10:00:00</em></p>
						<p>开通时间：<em>2016-07-01 10:00:00</em></p>
					</section>

					<!-- 成功状态图片 -->
					<!-- <div class="cg_img"><i></i></div> -->
					<!-- 处理状态图片 -->
					<!-- <div class="dg_img"><i></i></div> -->
					<!-- 失败状态图片 -->
					<div id="pic"><i></i></div>

					<i class="line"></i>
					<div class="apply_close_btn"></div>
				</div>
			</div>
		</div>

		<script src="http://fwp.juboon.com:80/fwp/ui/web/laydate/laydate.js"></script>
		<script src="http://fwp.juboon.com:80/fwp/ui/web/js/dist/dropload.min.js"></script>
		<script type="text/javascript">
			var start = {
				elem: '#begin_time',
				istime: true,
				istoday: false,
				choose: function(datas) {
					end.min = datas; //开始日选好后，重置结束日的最小日期
					end.start = datas //将结束日的初始值设定为开始日
				}
			};
			var end = {
				elem: '#end_time',
				istime: true,
				istoday: false,
				choose: function(datas) {
					start.max = datas; //结束日选好后，重置开始日的最大日期
				}
			};
			laydate(start);
			laydate(end);
		</script>
		<script type="text/javascript">
			$("#block").click(function() {
				$(".time").css({ display: 'block' });
			});
			$("#display").click(function() {
				$(".time").css({ display: 'none' });
			});

			// 选项卡切换1
			$('.order_nav').find('a').click(function() {
				var index = $(this).index();
				$(this).attr('class', 'active').siblings('a').attr('class', '');
				$('.container').find('.order_list').eq(index).css('display', 'block').siblings('.order_list').css('display', 'none');
			});
		</script>

		<script src="js/config.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/main.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
	</body>

</html>